<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="现有在管影院列表">
                <el-button class="btn commonButton" type="primary" @click="dialogMovise"  style="background:#409EFF !important;border-color: #409EFF;">+ 接入新影院</el-button>
                <el-button class="btn commonButton" :disabled="multipleSelectionData.length==0?true:false" type="default" @click="searchErrorListDelete">删除</el-button>
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
            </common-toolbar>
            <div>
                <formData ref="componentChild" :conmonDisabled="conmonDisabled" @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
               <el-table
                       :data="data"
                       v-loading.iTable="loading"
                       :stripe="true"
                       ref="mutipleTable"
                       :height="height"
                       :highlight-current-row="true"
                       border
                       row-key="id"
                       header-row-class-name="tableHeader"
                       tooltip-effect="dark"
                       class="watchTable"
                         @selection-change="handleSelectionChangeData"
                       style="width: 100%">
                     <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                   <el-table-column
                           label="No."
                           :index="indexMethod"
                           type="index"
                           width="50">
                   </el-table-column>
                   <el-table-column
                           property="cinemaNameCn"
                           label="影院名称"
                           :show-overflow-tooltip="true"
                           width="280"
                    >
                   </el-table-column>
                   <el-table-column
                           property="cinemaCode"
                           label="专资编码"
                           width="150">
                   </el-table-column>
                   <el-table-column
                           property="contactNameOne"
                           label="联系人"
                           width="150">
                           <template slot-scope="scope">
                               <p>{{scope.row.contactNameOne}}</p>
                               <p>{{scope.row.contactNameTwo}}</p>
                           </template>
                   </el-table-column>
                   <el-table-column
                           property="phoneOne"
                           label="联系方式"
                           width="150">
                           <template slot-scope="scope">
                               <p>{{scope.row.phoneOne}}</p>
                               <p>{{scope.row.phoneTwo}}</p>
                           </template>
                   </el-table-column>
                   <el-table-column
                           property="headquartersName"
                           label="总部"
                           :show-overflow-tooltip="true"
                           width="100">
                            <template slot-scope="scope">
                               <p>{{scope.row.headquartersName}}</p>
                           </template>
                   </el-table-column>
                  
                   <el-table-column
                           property="address"
                           :show-overflow-tooltip="true"
                           label="地址">
                   </el-table-column>
               </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
               
            </layout>
        </layout>
        <el-dialog
                title="接入新影院"
                :visible.sync="dialogVisible" :before-close="handleClose">
            <div>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="6"><div class="grid-content bg-purple"> 可批量上传影院专资编码：</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">
                       <el-upload
                action=""
                accept=".xls,.xlsx"
                :http-request="imgAdd"
                ref="upload"
                :file-list="uploads"
                :on-change="Onchange"
                :on-preview="handlePictureCardPreview"
                :before-remove="beforeRemove"
                :limit="1"
                :before-upload="beforeAvatarUpload">
               <el-button v-loading="false">选择文件</el-button>
              </el-upload>
</div></el-col>
                    <el-col :span="9"><div class="grid-content bg-purple">*支持xls/xlsx文件上传，可下载模板文件填写后上传</div></el-col>
                    <el-col :span="3"><div class="grid-content bg-purple-light"><el-button @click="downloan">下载模板</el-button></div></el-col>
                </el-row>
                <el-divider></el-divider>
                <el-form ref="form" :inline="true" :model="form" label-width="80px">
                    <!-- <el-form-item label="或直接勾选未关联总部影院：">
                        <el-input size="small" v-model.trim="form.user"></el-input>
                    </el-form-item> -->
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model.trim="form.user1"></el-input>
                    </el-form-item>
                     <el-button class="btn commonButton" @click="condition1(form)" @keyup.enter.native="condition1(form)" :disabled="getDisables(form.user1)">搜索</el-button>
                </el-form>
                <!-- {{data1}} -->
               <el-table
               v-if="!disabled"
                       :data="data1"
                       v-loading.iTable="loading"
                       :stripe="true"
                       ref="mutipleTable"
                       :highlight-current-row="true"
                       border
                       row-key="id"
                       header-row-class-name="tableHeader"
                         @selection-change="handleSelectionChange"
                       tooltip-effect="dark"
                       class="watchTable"
                       :key="cinemaCodes"
                       style="width: 100%;height: 200px;">
                        <el-table-column
                            type="selection"
                            width="55" :selectable='getCinemaCode1'>
                        </el-table-column>
                    
                        <el-table-column
                                label="No."
                                :index="indexMethod"
                                type="index"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                property="cinemaNameCn"
                                label="影院名称"
                                :show-overflow-tooltip="true"
                                width="280"
                            >
                                <template slot-scope="scope">
                                    <span :style="{'color': getCinemaCode(scope.row)==1?'red':''}">{{scope.row.cinemaNameCn}}</span>
                                </template>
                        </el-table-column>
                        <el-table-column
                                property="cinemaCode"
                                label="专资编码"
                                width="90">
                                <template slot-scope="scope">
                                    <span :style="{'color': getCinemaCode(scope.row)==1?'red':''}">{{scope.row.cinemaCode}}</span>
                                </template>
                        </el-table-column>
                        <el-table-column
                                property="contactNameOne"
                                label="联系人">
                                <template slot-scope="scope">
                                    <span :style="{'color': getCinemaCode(scope.row)==1?'red':''}">
                                        <p>{{scope.row.contactNameOne}}</p>
                                    <p>{{scope.row.contactNameTwo}}</p>
                                    </span>
                                </template>
                        </el-table-column>
                        <el-table-column
                                property="phoneOne"
                                label="联系方式"
                                width="150">
                                 <template slot-scope="scope">
                                    <span :style="{'color': getCinemaCode(scope.row)==1?'red':''}"><p>{{scope.row.phoneOne}}</p>
                                    <p>{{scope.row.phoneTwo}}</p></span>
                                </template>
                        </el-table-column>
                        <el-table-column
                                property="province"
                                label="总部"
                                :show-overflow-tooltip="true"
                                width="100">
                                <template slot-scope="scope">
                                    <span :style="{'color': getCinemaCode(scope.row)==1?'red':''}">{{scope.row.headquartersName}}</span>
                                </template>
                        </el-table-column>
                        
                        <el-table-column
                                property="address"
                                :show-overflow-tooltip="true"
                                label="地址">
                                 <template slot-scope="scope">
                                    <span :style="{'color': getCinemaCode(scope.row)==1?'red':''}">{{scope.row.address}}</span>
                                </template>
                        </el-table-column>
               </el-table>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <!-- <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button> -->
                <el-button class="btn commonButton" type="default" @click="bindCinema">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import Service from './userManagement.service';
    import formData from '@/views/form/form.vue';

    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';
    import moment from 'moment';
    @Component({components:{
        formData
    }})
    export default class cinemaList extends Vue{
        height = 500;
        windowHeight = 700;
        loading = false;
        data = [];
        data1 = [];
        onlyShowError = false;
        total = 0;
        page = 1;
        pageSize = 30;
        cinemaName = '';
        cinemaCode = '';
        conmonDisabled:boolean=false;
        dialogVisible = false;
        form = {
            name: '',
            code: '',
            date: '',
            user: '',
            user1: '',
        };
        fileList=[];
        importFile= {
            name: null,
        }
        normal=[]
        uploads=[];
        uploadsList=[];
        multipleSelection=[];
        multipleSelectionData=[];
        disabled=true;
        headquartersCode={}
        constructor(){
            super();
        };
         // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
        searchErrorList(){
        // this.searchList();
            this.$router.push({
                    path:'/set/userManagement/newManagement',
                    name:'总部管理'
                })
        }
        getDisables(row) {
            if(row=='') {
                // return this.disabled = true
                return true
            } else{
                // return this.disabled = false
                return false
            }
        }
        handleSelectionChangeData(val) {
            this.multipleSelectionData = val
            // for(let item of val) {
            //     this.multipleSelectionData.push(item.cinemaCode)
            // }
        }
        getCinemaCode(row) {
            if(row.cinemaCodes ==1) {
                return 1;
            } else {
                if((row.headquartersCode!=undefined||row.headquartersCode!=null)&&row.headquartersCode!='') {
                    return 1
                } else {
                    return 0
                }
            }
        }
        getCinemaCode1(row) {
            if(row.cinemaCodes ==1) {
                return 0;
            } else {
                if((row.headquartersCode!=undefined||row.headquartersCode!=null)&&row.headquartersCode!='') {
                    return 0
                } else {
                    return 1
                }
            }
            // if(row.cinemaCodes ==1) {
            //     return 1;
            // } else {
            //     if((row.headquartersCode!=undefined||row.headquartersCode!=null)&&row.headquartersCode!='') {
            //         return 1
            //     } else {
            //         return 0
            //     }
            // }
        }
        searchErrorListDelete() {
            let ids = [];
            if(this.multipleSelectionData.length>0) {
                for(let item of this.multipleSelectionData) {
                    ids.push(item.cinemaCode)
                }
            }
             this.$confirm('此操作将永久删除该影院, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                Service.cancelBind(ids).then(res=>{
                        if(res.data.succeeded) {
                            if(typeof(res.data.data) == 'string') {
                                return this['$message']({
                                    message: res.data,
                                    type: 'error'
                                });
                            }
                            this['$message']({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.searchList();
                            this.multipleSelectionData = []
                        }else {
                            this['$message']({
                                message: res.data.errorMessage,
                                type: 'error'
                            });
                        }
                    })
                })
            
        }
        
        handleClose() {
            this.dialogVisible =false;
            // this.searchList()
            this.data1 = []
            this.uploads=[]
            this.beforeRemove(this.importFile)
            this.form.user1 = ''
        }
        beforeRemove(file) {
            return file.name;
        }
        searchAllList(){
            this.onlyShowError = false;
            this.searchList();
        }
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
        }
        handlePictureCardPreview(file) {
        // //console.log(file)
        //   this.dialogImageUrl = file.url
        this.dialogVisible = true
        }
        Onchange(file, list) {
            //console.log(file)
        this.fileList = list.slice(-1);
        this.importFile.name = file.name;
        //  this.uploads = [];
        // this.uploads.push(file.name)
        }
        imgAdd(param) {
            let form = new FormData();
            let file = this.fileList[0].raw;
            form.append("file", param.file);
            
            let list = [];
            Service.analysisExcel(form)
            .then(res=>{
                if(res.status) {
                    // this.multipleSelection = res.data.data;
                    for(let item in res.data.notExist) {
                        if(item!='remove') {
                            list.push({cinemaCode:res.data.notExist[item],cinemaCodes:1,orderNum:item})
                        }
                    }
                    list = res.data.data.concat(list)
                    this.data1 = list.sort((a,b)=>{
                        return a.orderNum -b.orderNum
                    })
                    this.disabled = false
                    // this.bindCinema()
                }
            });
           
        }
        downloan() {
            Service.downloadExcel().then(res=>{
                if (res) {
                    //console.log(res)
                        let csvData = new Blob([res]);
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            window.navigator.msSaveBlob(csvData,'文件下载.xlsx');
                        }else{
                            let url = window["URL"].createObjectURL(new Blob([res]));
                            let link = document.createElement('a');
                            link.style.display = 'none';
                            link["href"] = url;
                            link.setAttribute('download','文件下载.xlsx');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }
                    }else{
                        this['$message']({
                            message: '下载文件失败',
                            type: 'error'
                        });
                    }
            })
        }
        beforeAvatarUpload(file) {
        // const isLt2M = file.size / 1024 / 1024 < 1;
            // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'||file.type === 'image/gif';
            // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isJPG) {
        //   this.$message.error('上传图片只能是 JPG、PNG格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传图片大小不能超过 1MB!');
        // }
        // return  isLt2M;
        // return isJPG;
        }
        dialogMovise() {
            this.dialogVisible = true;
            
        }
        noBindCinemaList() {
            let params = {
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
            }
            this.loading = true;
            Service.noBindCinemaList(params).then(res=>{
                if(res.data.succeeded) {
                    //console.log(res.data.data.length)
                    this.loading = false;

                    if(res.data.data.length==0) {
                        this.data1 = [{cinemaCode:this.cinemaCode,cinemaCodes:1,cinemaNameCn:undefined,
                        contactNameOne:undefined,
                        contactNameTwo:undefined,
                        phoneOne:undefined,
                        phoneTwo:undefined,
                        province:undefined,
                        address:undefined,}]
                        //console.log(this.data1)
                        // this.data1 = res.data.data
                    }else {
                        this.data1 = res.data.data
                    }
                } else {
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
         handleSelectionChange(val) {
            // this.multipleSelection = val;
            if(val.length==0) {
                return this.multipleSelection = []
            }
            for(let item of val) {
                //console.log(item)
                this.multipleSelection.push(item.cinemaCode)
            }
        }
        searchList(){
            // //console.log(this.$route.params.headquartersCode)
            let params = {
                pageNum: this.page,
                pageSize: this.pageSize,
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
                headquartersCode:this.headquartersCode.headquartersCode
            }
            this.loading=true;
            Service.bindCinemaList(params).then((res)=>{
                if(res.data.succeeded) {
                    this.data = res.data.data;
                    this.total = res.data.totalRecords;
                    this.loading=false;
                }else {
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                    this.loading=false;
                }
            })
        }
        bindCinema() {
            let params = {
                "headquartersCode":this.headquartersCode.headquartersCode,
                "headquartersName":this.headquartersCode.headquartersName,
                "cinemaCodes": this.multipleSelection
            }
            Service.bindCinema(params).then(res=>{
                
                if(res.data.succeeded) {
                    // this.dialogVisible= false;
                    this.multipleSelection = [];
                    // this.noBindCinemaList()
                    this.cinemaName = '';
                    this.cinemaCode = '';
                    this.searchList()
                    this.page = 1;
                     this['$message']({
                        message: '保存成功',
                        type: 'success'
                    });
                    
                }else {
                    this.multipleSelection = [];
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        handleSizeChange(val) {
            this.pageSize = val;
            this.searchList();
        }

        handleCurrentChange(val) {
            this.page = val;
            this.searchList();
        }

        showDetail(){
        
        }

        dateFormat(date){
            return moment(date).format("YYYY-MM-DD,H:m:s");
        }

        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
        }
        getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.conmonDisabled = true;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            //console.log(data)
            this.page = 1
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        condition1(data) {
            //console.log(data)
            this.cinemaName = data.user;
            this.cinemaCode = data.user1;
            this.disabled =false;
            if(this.multipleSelection.length==0) {
                this.noBindCinemaList()
            } else {
                return this['$message']({
                        message: '请先将已勾选的影院提交后，再搜索新影院',
                        type: 'warning'
                    });
            }
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
            this.searchList();
        }
        created(){
            const me = this;
            this.headquartersCode =  JSON.parse(window.localStorage.getItem('headquartersCode'))
            this.resizeEvent();
            this.searchList();
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                })()
            };
        };
        mounted(){   
                  
        };
        
    }
</script>
<style lang="scss" scoped>
   /deep/ .el-table__body-wrapper {
       height: 82%;
       overflow-y: auto;
   }
</style>